<template>
  <el-row class="bgimage">
    <el-col :span="8">
      <div class="grid-content bg-purple">
        <div :body-style="{ padding: '0px' }">
<!--          <img src="https://www.iloveleiyuxin.com/images/big8.jpg" class="image">-->
          <div style="padding: 14px;">
            <h1>我们的简介</h1>
            <span style="font-size: large">
              老夫聊发少年狂，左牵黄，右擎苍，锦帽貂裘，千骑卷平冈，为报倾城随太守，亲射虎，看孙郎。<br>
              酒酣胸胆尚开张，鬓微霜，又何妨，持节云中，何日遣冯唐？会挽雕弓如满月，西北望，射天狼！
            </span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <br><br><br><br><br><br><br><br><br>
      <h1>欢迎使用实验系统</h1>
      <h2>本系统使用VUE开发</h2>
    </el-col>
    <el-col :span="8">
      <div class="grid-content bg-purple-light">
        <el-card class="box-card">
          <h1>请登录系统</h1>
          <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
            <el-form-item
              label="学号"
              prop="studentNo"
              :rules="[
                  { required: true, message: '学号不能为空'},
                  { type: 'number', message: '只能填入数字'}
              ]"
            >
              <el-input type="studentNo" v-model.number="numberValidateForm.studentNo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name" :rules="[
                  { required: true, message: '姓名不能为空'},
              ]">
              <el-input v-model="numberValidateForm.name"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
              <el-button @click="resetForm('numberValidateForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      numberValidateForm: {
        studentNo: '',
        name: ''
      },
      currentDate: new Date()
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if(this.$store.state.time!==0){
          this.$notify.error({
            title: '错误',
            message: '缓存内部存在数据，请按F5刷新页面'
          });
          return false;
        }
        if (valid) {
          this.$notify.success({
            title: '成功',
            message: '登录成功'
          });
          //这里应该放进去后台返回的token，但是没加后台就没放进去token
          sessionStorage.setItem('token','zheshiyigeceshitoken')
          this.$store.commit('login',this.numberValidateForm)
          this.$router.push("/operating")

        } else {
          this.$notify.error({
            title: '错误',
            message: '请填入正确的姓名和学号'
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>
.el-card{
  height: 500px;
}
.bgimage{
  background-image: url("~@/../static/loginb.jpg");
}
</style>
